<template>
    <div id="app">
      <el-input v-model="input" placeholder="按用户名称搜索" style="width:300px;margin: 10px;"></el-input>
      <!-- <el-row> -->
        <el-button @click="search">搜索</el-button>
        <el-button @click="back">返回</el-button>
        <el-button @click="join">添加</el-button>
      <!-- </el-row> -->
        <div>
        <el-table :data="userList" style="width: 850">
          <el-table-column prop="userName" label="姓名" width="210">
          </el-table-column>
          <el-table-column prop="userPhone" label="电话" width="210">
          </el-table-column>
          <el-table-column prop="useremail" label="邮箱" width="210">
          </el-table-column>
          <el-table-column prop="userAdress" label="地址" width="210">
          </el-table-column >
          <el-table-column prop="userId" label="操作" width="280">
            <template slot-scope="scope">
              <el-button type="info"  @click="deleteUser(scope.row.userId)">删除</el-button>
              <el-button type="info"  @click="changeItem(scope.row.userId)">修改</el-button>
            </template>
          </el-table-column>
        </el-table> 
      </div>

      <div>
        <el-pagination
          small
          layout="prev, pager, next"
          :current-page.sync="page"
          @current-change="changePage"
          :total="total">
        </el-pagination>
      </div>
      <div>
        <!-- <el-button type="text" @click="dialogVisible = true">上传图片</el-button> -->
        <el-dialog
          title="修改用户信息"
          :visible.sync="dialogVisible"
          width="60%"
          :before-close="handleClose">
          <el-form ref="user" :model="user" label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="user.userName"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="user.userPhone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="user.useremail"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="user.userAdress"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="changeUser">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    
  </template>
  
  <script>
    export default {
    data() {
      return {
        dialogVisible: false,
        userList:[],
        page:1,
        total:20,
        input:'',
        user:{
          name:"",
          id:'',
          phone: 0,
          email:"",
          adress:"",
        },
      };
    },
    methods: {
        changePage(pag){
            this.page = pag;
            console.log(this.page);
            this.getUser();
        },
        async search(){
          await this.$axios.post("http://localhost:3000/searchuser",{name:this.input})
            .then(res=>{
                console.log(res);
                this.total  = 1;
                this.userList=res;
            })
        },
        async join(){
          this.dialogVisible = true;
          this.user = {
            userName:"",
            userId:0,
            userPhone: '',
            useremail:"",
            userAdress:"",
          };
        },
        async deleteUser(id){
            console.log(id);
            await this.$axios.post("http://localhost:3000/deleteuser",{id:id})
            .then(res=>{
                console.log(res);
                this.getCount()
                this.getUser();
            })
        },
        async changeItem(id){
          this.dialogVisible = true;
          var userItem = this.userList.filter(item => item.userId == id);
          if(userItem){
            this.user = userItem[0];
          }
        },
        async changeUser(){
          console.log(this.user);
          await this.$axios.post("http://localhost:3000/changeuser",{user:this.user})
            .then(res=>{
                console.log(res);
                this.getCount()
                this.getUser();
            })
          this.dialogVisible = false;
        },
        back(){
          this.getUser();
          this.getCount()
        },
      async getCount(){
        await this.$axios.get('http://localhost:3000/getucount')
        .then(res=>{
            this.total=res;
          })
       },
       async getUser(){
        await this.$axios.post('http://localhost:3000/getuser',{page:this.page})
        .then(res=>{
            // console.log(res);
            this.userList=res;
          })
       },
    },
    mounted(){
        this.getUser();
        this.getCount()
    }
  }
  </script>
  
  <style>
  
  </style>